// 画布基础
const 画布 = document.querySelector('.画布');
const 宽度 = 画布.width = window.innerWidth - 25;
const 高度 = 画布.height = window.innerHeight - 25;
const 渲染器 = 画布.getContext('2d');

// 简单矩形
渲染器.fillStyle = 'rgb(0,0,0)';
渲染器.fillRect(0, 0, 宽度, 高度);

渲染器.fillStyle = 'rgb(255, 0, 0)';
渲染器.fillRect(50, 50, 100, 150);

渲染器.fillStyle = 'rgb(0, 255, 0)';
渲染器.fillRect(75, 75, 100, 100);

渲染器.fillStyle = 'rgba(255, 0, 255, 0.75)';
渲染器.fillRect(25, 100, 175, 50);

// 描边
渲染器.strokeStyle = 'rgb(255, 255, 255)';
渲染器.lineWidth = 5;
渲染器.strokeRect(25, 25, 175, 200);


// 路径-线条
function 度转弧度(度) {
    return 度 * Math.PI / 180;
}

渲染器.fillStyle = 'rgb(255, 0, 0)';
渲染器.beginPath();
渲染器.moveTo(250, 50);
渲染器.lineTo(350, 50);
const 三角形高度 = 50 * Math.tan(度转弧度(60));
渲染器.lineTo(300, 50 + 三角形高度);
渲染器.lineTo(250, 50);
渲染器.fill();


// 路径-圆
渲染器.fillStyle = 'rgb(0, 0, 255)';
渲染器.beginPath();
渲染器.arc(450, 106, 50, 度转弧度(0), 度转弧度(360));
渲染器.fill();

// 路径-弧
渲染器.fillStyle = 'yellow';
渲染器.beginPath();
渲染器.arc(500, 106, 50, 度转弧度(-45), 度转弧度(45), true);
渲染器.lineTo(500, 106);
渲染器.fill();

// 文本
渲染器.strokeStyle = 'white';
渲染器.lineWidth = 1;
渲染器.font = '36px arial';
渲染器.strokeText('画布文本', 50, 500);

渲染器.fillStyle = 'red';
渲染器.font = '48px georgia';
渲染器.fillText('画布文本', 250, 500);


// 图片
const 图片 = new Image();
图片.src = '火狐.png';
图片.addEventListener(
    'load', 
    () => 渲染器.drawImage(图片, 50, 50)
);
